<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
  margin:0;
  padding:0;
  box-sizing: border-box;
}

body{
  width: 960px;
  margin:1rem auto;
  background-color: #EEE;
  min-height: 1200px;}

ul{
  list-style-type: none;
}

.box{
  display: flex;
  padding:1rem;
  background-color: #FFF;

}


.goodBox{
  position: relative;
}


.picBox{
  width:350px;
  height: 350px;
  border:1px solid #ccc;
}


.pic{
  width:100%;
  height: 100%;
}

.previewBox{
  position: absolute;
  left:110%;
  top:0;
  width:450px;
  height:450px;
  background-color: #f00;
  visibility:hidden;
  overflow: hidden;
  /* border:5px solid #000; */
  box-shadow: 0 0 5px #000;

}

.previewPic{
  position: absolute;
  left:0;
  top:0;
}

.infoBox{
  margin-left:2rem;
  line-height: 2;
}

.drag{
  position: absolute;
  left:0;
  top:0;
  width:150px;
  height:150px;
  background-color: rgba(255,255,0,.3);
  visibility: hidden;
  cursor:move;
}

.picListBox {
  margin: .5rem 0;
  width:100%;
  display: flex;
  justify-content: space-between;
}

.picListBox li{
  border:1px solid #ddd;
  cursor:pointer;
}

.picListBox .active{
  border-color: red;
}

.picListBox img{
  width:75px;
  height:75px;
}

</style>
</head>
<body>
<div class="box">
    <div class="goodBox">
      <div class="picBox">
        <img class="pic" src="./images/1.png">
        <div class="drag"></div>
      </div>
      <div class="previewBox">
        <img class="previewPic" src="./images/1.png">
      </div>
      <ul class="picListBox">
        <li><img src="./images/1.png"></li>
        <li><img src="./images/2.jpg"></li>
        <li><img src="./images/3.jpg"></li>
        <li><img src="./images/4.jpg"></li>
      </ul>
    </div>


    <ul class="infoBox">
      <li>【当天发货】小米11 5G 骁龙888 2K AMOLED四曲面柔性屏 游戏手机 12G+256GB 烟紫（素皮） 55W充电器套装</li>
      <li>【咨询客服叠加更优惠】赠：55W充电器套装+180天碎屏宝+运费险+晒单返20</li>
      <li> <br/> </li>
      <li>配 送 至: </li>
      <li>商品选择:</li>
      <li>增值保障</li>
      <li>京东服务</li>
      <li>白条分期</li>
      <li>温馨提示</li>
      <li> <br/> </li>
      <li>加入购物车</li>
    </ul>


</div>

<script type="module">
import x from './fangdajing.js';

console.log(x);

</script>
</body>
</html>